<template>
	<!-- 运行情况 -->
	<div class="topa">
		<div class="run-c">
			<p id='p1'>
			<div id='p-div1'></div>
			<div id='p-div2'>总数</div>
			</p>
			<p id='p2'>
			<div id='p-div3'></div>
			<div id='p-div4'>未恢复</div>
			</p>
		</div>
		<Arrows title='运行情况' />
		<div class="run-b">
			<div v-for="(item,index) in runList" :key="index" class="divs">
				<div class="p1s">
					<p class="p-span1">{{item.title}}</p>
					<p class="p-span2">{{item.AppendedText}}</p>
				</div>
				<div class="p2s">
					<p class="p-span3">{{item.unRecovered}}</p>
					<p class="p-span4">{{item.total}}</p>
				</div>
			</div>


		</div>
	</div>
</template>

<script>
	import Arrows from '../arrows/index.vue'
	export default {
		props: ['runList'],
		components: {
			Arrows
		}
	}
</script>

<style lang='scss' scoped>
	.topa {
		position: relative;
		// border: 1px dashed #ccc;



		.run-b {
			display: flex;
			flex-wrap: wrap;
			margin: 21px 28px;
			justify-content: space-between;

			.divs {
				width: 280px;
				height: 46px;
				// border: 1px dashed #ccc;
				margin-bottom: 28px;
				display: flex;
				justify-content: space-between;
				padding: 10px 0 0 0;

				background: url("../../assets/image/hellowword/marshalling.png") no-repeat;
				background-size: 100%;

				.p1s {
					margin-left: 15px;
					background-image: -webkit-linear-gradient(top,
							#ffffff 0%,
							//rgba(255, 255, 255, 0.93) 66.28%,
							rgba(255, 255, 255, 0.48) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.p2s {
					margin-right: 8px;
					// border: 1px solid red;
				}

				.p1s,
				.p2s {
					display: flex;

					.p-span1 {

						height: 29px;

						//   -webkit-background-clip: text;
						//   background-clip: text;
						//   -o-background-clip:text;
						//   -ms-background-clip:text;
						//   -moz-background-clip:text;
						font-family: Microsoft YaHei;
						// color: #ffffff;
						font-size: 22px;
						line-height: 29px;
						display: block;
					}

					.p-span2 {
						// color: white;
						font-size: 16px;
						// border:  1px solid gold;
						display: block;
						height: 29px;
						line-height: 30px;

					}

					.p-span3 {

						height: 30px;
						background-image: -webkit-linear-gradient(top,
								#ffbf45 0%,
								rgba(255, 191, 69, 0.92) 66.28%,
								rgba(255, 191, 69, 0.48) 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-family: DIN Alternate;
						font-weight: 700;

						font-size: 26px;
						line-height: 30px;
						text-align: right;
					}

					.p-span4 {
height: 30px;
					background-image: -webkit-linear-gradient(top,
								#ffffff 0%,
								rgba(255, 255, 255, 0.93) 66.28%,
								rgba(255, 255, 255, 0.48) 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-family: DIN Alternate;
						font-weight: 700;
						color: white;
						font-size: 26px;
						line-height: 30px;
						text-align: right;
						// border: 1px solid #ccc;
					}
				}

			}
		}

		.run-c {
			display: flex;
			position: absolute;
			right: 70px;
			justify-content: center;
			align-items: center;

			p {
				margin-right: 30px;
			}

			#p-div1 {
				width: 12px;
				height: 12px;
				background: white;
				margin-right: 10px;
				// background-image: linear-gradient(180deg,#ffffff rgba(5, 3, 3, 0.48)) 100%);
			}

			#p-div2,
			#p-div4 {
				width: 48px;
				height: 21px;
				font-family: Microsoft YaHei;
				color: #a3d5f7;
				font-size: 16px;
				line-height: 21px;
			}

			#p-div2 {
				width: 32px;
			}

			#p-div3 {
				width: 12px;
				height: 12px;

				background: #ffbf45;
				margin-right: 8px;
			}
		}

		width: 956px;
		height: 201px;
		background: url("../../assets/image/hellowword/BackgroundTwo.png");
		background-size: 100%;
		padding-top: 20px;
	}
</style>
